<ix-page-header [pageTitle]="'Create Instance' | translate">
  @if (!(hasRequiredRoles | async)) {
    <ix-readonly-badge></ix-readonly-badge>
  }
</ix-page-header>

<div class="container">
  <form class="form" [formGroup]="form" (submit)="onSubmit()">
    <ix-form-section
      [label]="'Instance Configuration' | translate"
      [help]="instancesHelptext.virtualizationMethodTooltip | translate"
    >
      <ix-input
        formControlName="name"
        [label]="instancesHelptext.namePlaceholderLabel | translate"
        [required]="true"
        [hint]="instancesHelptext.nameHint | translate"
      ></ix-input>

      <ix-icon-group
        formControlName="instance_type"
        [label]="instancesHelptext.virtualizationMethodLabel | translate"
        [tooltip]="instancesHelptext.virtualizationMethodTooltip | translate"
        [required]="true"
        [options]="virtualizationTypeIcons"
        [showLabels]="true"
      ></ix-icon-group>

      @if (isVm()) {
        <ix-radio-group
          formControlName="source_type"
          [label]="'VM Image Options' | translate"
          [required]="true"
          [options]="imageSourceTypeOptions$"
        ></ix-radio-group>
      }

      @switch (form.value.source_type) {
        @case (VirtualizationSource.Image) {
          <div class="image-field">
            <ix-input
              class="input"
              formControlName="image"
              [readonly]="true"
              [label]="'Image' | translate"
              [required]="true"
            ></ix-input>

            <button
              mat-button
              ixTest="browse-images"
              type="button"
              (click)="onBrowseCatalogImages()"
            >{{ 'Browse Catalog' | translate }}</button>
          </div>
        }

        @case (VirtualizationSource.Zvol) {
          <div class="image-field">
            <ix-input
              class="input"
              formControlName="volume"
              [readonly]="true"
              [label]="'Volume' | translate"
              [required]="true"
            ></ix-input>

            <button
              mat-button
              ixTest="browse-isos"
              type="button"
              (click)="onSelectRootVolume()"
            >{{ 'Select Volume' | translate }}</button>
          </div>

          @if (form.value.volume_type === VolumeContentType.Iso) {
            <ix-combobox
              formControlName="image_os"
              [label]="'OS Type' | translate"
              [allowCustomValue]="true"
              [tooltip]="instancesHelptext.osImage.tooltip| translate"
              [provider]="imageOsProvider"
            ></ix-combobox>
          }
        }
      }
    </ix-form-section>

    <ix-form-section
      [label]="'CPU & Memory' | translate"
      [help]="instancesHelptext.cpuMemoryTooltip | translate"
    >
      <ix-input
        formControlName="cpu"
        [label]="instancesHelptext.cpuLabel | translate"
        [tooltip]="instancesHelptext.cpuTooltip | translate"
        [required]="isVm()"
        [hint]="isContainer() ? (instancesHelptext.cpuHint | translate) : undefined"
      ></ix-input>

      <ix-input
        formControlName="memory"
        [label]="instancesHelptext.memoryLabel | translate"
        [tooltip]="instancesHelptext.memoryTooltip | translate"
        [format]="formatter.memorySizeFormatting"
        [parse]="formatter.memorySizeParsing"
        [required]="isVm()"
        [hint]="isContainer() ? (instancesHelptext.memoryHint | translate) : undefined"
      ></ix-input>
    </ix-form-section>

    @if (isContainer()) {
      <ix-form-section
        [label]="'Environment' | translate"
      >
        <ix-list
          formArrayName="environment_variables"
          [empty]="form.controls.environment_variables.controls.length === 0"
          [label]="instancesHelptext.envLabel | translate"
          (add)="addEnvironmentVariable()"
        >
          @for (envControl of form.controls.environment_variables.controls; track envControl; let i = $index) {
            <ix-list-item
              [formGroupName]="i"
              [label]="'Environment Variable' | translate"
              (delete)="removeEnvironmentVariable(i)"
            >
              <div class="environment-variable">
                <ix-input
                  formControlName="name"
                  [label]="instancesHelptext.envNameLabel | translate"
                  [required]="true"
                ></ix-input>

                <ix-input
                  formControlName="value"
                  [label]="instancesHelptext.envValueLabel | translate"
                  [required]="true"
                ></ix-input>
              </div>
            </ix-list-item>
          }
        </ix-list>
      </ix-form-section>
    }

    <ix-form-section [label]="'Storage' | translate">
      @if (!hasOnePool()) {
        <ix-select
          formControlName="storage_pool"
          [label]="'Store At' | translate"
          [required]="true"
          [options]="poolOptions$"
        ></ix-select>
      }

      @if (isVm()) {
        <ix-select
          formControlName="root_disk_io_bus"
          [label]="'Root Disk I/O Bus' | translate"
          [tooltip]="instancesHelptext.ioBusTooltip | translate"
          [required]="true"
          [options]="diskIoBusOptions$"
        ></ix-select>

        <ix-input
          formControlName="root_disk_size"
          type="number"
          [required]="true"
          [label]="'Root Disk Size (in GiB)' | translate"
        ></ix-input>
      }

      <ix-list
        formArrayName="disks"
        [empty]="form.controls.disks.controls.length === 0"
        [label]="instancesHelptext.disksLabel | translate"
        [formArray]="form.controls.disks"
        (add)="addDisk()"
      >
        @for (disk of form.controls.disks.controls; track disk.value; let i = $index) {
          <ix-list-item
            [label]="'Disk' | translate"
            [formGroupName]="i"
            (delete)="removeDisk(i)"
          >
            @if (isContainer()) {
              <ix-explorer
                formControlName="source"
                [rootNodes]="[slashRootNode]"
                [label]="instancesHelptext.disksSourceLabel | translate"
                [required]="true"
                [nodeProvider]="datasetProvider"
                [canCreateDataset]="true"
              ></ix-explorer>

              <ix-input
                formControlName="destination"
                [label]="instancesHelptext.disksDestinationLabel | translate"
                [tooltip]="instancesHelptext.disksDestinationTooltip | translate"
                [required]="true"
              ></ix-input>
            }

            @if (isVm()) {
              <div class="image-field">
                <ix-input
                  class="input"
                  formControlName="source"
                  [readonly]="true"
                  [label]="'Volume' | translate"
                  [required]="true"
                ></ix-input>

                <button
                  mat-button
                  ixTest="browse-isos"
                  type="button"
                  (click)="onSelectVolume(disk.controls.source)"
                >{{ 'Select Volume' | translate }}</button>
              </div>

              <ix-select
                formControlName="io_bus"
                [label]="'I/O Bus' | translate"
                [tooltip]="instancesHelptext.ioBusTooltip | translate"
                [required]="true"
                [options]="diskIoBusOptions$"
              ></ix-select>
            }
          </ix-list-item>
        }
      </ix-list>

      @if (!isZvolSourceType && (bootFromOptions$ | async)?.length > 0) {
        <ix-select
          formControlName="boot_from"
          [label]="'Boot From' | translate"
          [tooltip]="instancesHelptext.bootFromTooltip | translate"
          [required]="true"
          [options]="bootFromOptions$"
        ></ix-select>
      }
    </ix-form-section>

    @if (isContainer()) {
      <ix-form-section
        [label]="'Proxies' | translate"
      >
        <ix-list
          formArrayName="proxies"
          [empty]="form.controls.proxies.controls.length === 0"
          [label]="instancesHelptext.proxiesLabel | translate"
          [formArray]="form.controls.proxies"
          (add)="addProxy()"
        >
          @for (proxy of form.controls.proxies.controls; track proxy; let i = $index) {
            <ix-list-item
              [label]="'Proxy' | translate"
              [formGroupName]="i"
              (delete)="removeProxy(i)"
            >
              <div class="protocol-and-port">
                <ix-select
                  class="protocol"
                  formControlName="source_proto"
                  [label]="instancesHelptext.hostProtocolLabel | translate"
                  [required]="true"
                  [options]="proxyProtocols$"
                ></ix-select>

                <ix-input
                  class="port"
                  type="number"
                  formControlName="source_port"
                  [label]="instancesHelptext.hostPortLabel | translate"
                  [tooltip]="instancesHelptext.hostPortTooltip | translate"
                  [required]="true"
                ></ix-input>
              </div>

              <div class="protocol-and-port">
                <ix-select
                  class="protocol"
                  formControlName="dest_proto"
                  [label]="instancesHelptext.instanceProtocolLabel | translate"
                  [tooltip]="instancesHelptext.instanceProtocolTooltip | translate"
                  [required]="true"
                  [options]="proxyProtocols$"
                ></ix-select>

                <ix-input
                  class="port"
                  type="number"
                  formControlName="dest_port"
                  [label]="instancesHelptext.instancePortLabel | translate"
                  [required]="true"
                ></ix-input>
              </div>
            </ix-list-item>
          }
        </ix-list>
      </ix-form-section>
    }

    <ix-form-section
      [label]="'Network' | translate"
      [help]="instancesHelptext.networkTooltip | translate"
    >
      <ix-checkbox
        formControlName="use_default_network"
        [label]="instancesHelptext.networkUseDefaultLabel | translate"
      ></ix-checkbox>

      @if (!form.controls.use_default_network.value) {
        @if (hasPendingInterfaceChanges()) {
          <p class="warning">
            {{ 'NIC selection is currently restricted due to pending network changes.' | translate }}
          </p>
        } @else {
          @if (bridgedNicDevices(); as devices) {
            @if (devices.length > 0) {
              <p>{{ bridgedNicTypeLabel ? (bridgedNicTypeLabel | translate) : '' }}</p>

              @for(nicOption of devices; track nicOption.value ) {
                <ix-checkbox
                  [label]="nicOption.label"
                  [formControl]="nicOption.control"
                ></ix-checkbox>
              }
            }
          } @else {
            <ngx-skeleton-loader></ngx-skeleton-loader>
          }

          @if (macVlanNicDevices(); as devices) {
            @if (devices.length > 0) {
              <p>{{ macVlanNicTypeLabel ? (macVlanNicTypeLabel | translate) : '' }}</p>

              @for(nicOption of devices; track nicOption.value ) {
                <ix-checkbox
                  [label]="nicOption.label"
                  [formControl]="nicOption.control"
                ></ix-checkbox>
              }
            }
          } @else {
            <ngx-skeleton-loader></ngx-skeleton-loader>
          }
        }
      } @else {
        <div>
          <div class="network-list-item">
            <strong>{{ 'Bridge' | translate }}: </strong>
            <span>{{ 'Automatic' | translate }}</span>
          </div>
          <div class="network-list-item">
            <strong>{{ 'IPv4 Network' | translate }}: </strong>
            <span>{{ defaultIpv4Network() }}</span>
          </div>
          <div class="network-list-item">
            <strong>{{ 'IPv6 Network' | translate }}: </strong>
            <span>{{ defaultIpv6Network() }}</span>
          </div>
        </div>
      }
    </ix-form-section>

    @let usbDevices = usbDevices$ | async;
    @if (usbDevices && usbDevices.length > 0) {
      <ix-form-section
        [label]="'USB Devices' | translate"
      >
        <ix-checkbox-list
          formControlName="usb_devices"
          [label]="instancesHelptext.usbDevicesLabel | translate"
          [options]="usbDevices$"
        ></ix-checkbox-list>
      </ix-form-section>
    }

    @let gpuDevices = gpuDevices$ | async;
    @if (gpuDevices && gpuDevices.length > 0) {
      <ix-form-section
        [label]="'GPU Devices' | translate"
      >
        <ix-checkbox-list
          formControlName="gpu_devices"
          [label]="'GPU Devices' | translate"
          [options]="gpuDevices$"
        ></ix-checkbox-list>
      </ix-form-section>
    }

    @if (isVm()) {
      <ix-form-section [label]="'PCI Passthrough' | translate">
        @if (form.value.pci_devices?.length) {
          <p>{{ 'Selected Devices' | translate }}:</p>

          <ul class="pci-devices">
            @for (device of form.value.pci_devices; track device) {
              <li>
                <div class="device">
                  {{ device.label }}

                  <button
                    mat-icon-button
                    type="button"
                    [ixTest]="['remove-pci', device.label]"
                    (click)="removePciDevice(device.value)"
                  >
                    <ix-icon name="mdi-close"></ix-icon>
                  </button>
                </div>
              </li>
            }
          </ul>
        }

        <button
          mat-button
          ixTest="add-pci"
          type="button"
          class="add-pci-button"
          (click)="onAddPciPassthrough()"
        >{{ 'Add PCI Passthrough' | translate }}</button>
      </ix-form-section>
    }

    @if (isVm()) {
      <ix-form-section [label]="'VNC' | translate">
        <ix-checkbox
          formControlName="enable_vnc"
          [label]="instancesHelptext.enableVncLabel | translate"
          [tooltip]="instancesHelptext.enableVncTooltip | translate"
          [hint]="form.value.enable_vnc && instancesHelptext.vncHint | translate"
        ></ix-checkbox>

        @if (form.value.enable_vnc) {
          <ix-input
            formControlName="vnc_port"
            type="number"
            [label]="'VNC Port' | translate"
          ></ix-input>

          <ix-input
            formControlName="vnc_password"
            type="password"
            [label]="'VNC Password' | translate"
            [hint]="'VNC password is not cryptographically secure. You should not rely on it as a single authentication mechanism for your VMs.' | translate"
          ></ix-input>
        }
      </ix-form-section>

      <ix-form-section [label]="'Security' | translate">
        <ix-checkbox
          formControlName="tpm"
          [label]="instancesHelptext.addTpmLabel | translate"
          [tooltip]="instancesHelptext.addTpmTooltip | translate"
        ></ix-checkbox>

        <ix-checkbox
          formControlName="secure_boot"
          [label]="'Secure Boot' | translate"
          [tooltip]="secureBootTooltip"
        ></ix-checkbox>
      </ix-form-section>
    }

    <div class="actions">
      <button
        mat-button
        type="submit"
        color="primary"
        ixTest="create"
        [disabled]="form.invalid || isLoading()"
      >
        {{ 'Create' | translate }}
      </button>
    </div>
  </form>
  <ix-form-glossary class="glossary"></ix-form-glossary>
</div>
